<template>
	<!-- component/score/index.wxml -->
	<view class='starsBox' :style="`width:${isClick?(size * stars.length + (size/2) * 4 + 20 ):(size * stars.length)}upx;height:${size}upx;`">
		<view :class="'stars '+size" :style="`width:${size * stars.length}upx;height:${size}upx;`">
			<block v-for="(item,index) in stars" :key="index" :src="'http://boweisou.oss-cn-shenzhen.aliyuncs.com/xinyouxuan/'+item+'.png'">
				<image :src="`http://boweisou.oss-cn-shenzhen.aliyuncs.com/xinyouxuan/${item == 0 ? 'grayStar':item}.png`" :style="`width:${size}upx;height:${size}upx;`"
				 :data-index="index" @tap.stop="computeScore"></image>
			</block>
		</view>
		<view v-if="isClick" class='text' :style="`font-size:${size/2}upx;`">
			<text v-if="value=='0'" class='pointText'>暂无评分</text>
			<text v-else-if="value=='1'" class='pointText'>差评</text>
			<text v-else-if="value<'4'" class='pointText'>中评</text>
			<text v-else class='pointText'>好评</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			},
			size: {
				type: Number,
				default: 30
			},
			isClick: {
				type: null,
				default: false
			}
		},
		data() {
			return {
				stars: [0, 0, 0, 0, 0]
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				let star = this.properties.value;
				let stars = [0, 0, 0, 0, 0];
				for (let i = 0; i < Math.floor(star); i++) {
					stars[i] = 'star';
				}
				if (star > Math.floor(star)) {
					stars[Math.floor(star)] = 'halfStar';
				}
				for (let i = 0; i < stars.length; i++) {
					if (stars[i] == 0) {
						stars[i] = 'grayStar';
					}
				}
				this.setData({
					stars
				})
			},

			computeScore(e) {
				let index = e.currentTarget.dataset.index;
				let isClick = this.data.isClick;
				if (isClick) {
					let score = index + 1;
					this.triggerEvent('init', {
						score
					});
				}
			}
		}
	}
</script>

<style>
	/* component/score/index.wxss */
	.starsBox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.stars {
		width: 150upx;
		height: 50upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.stars image {
		width: 30upx;
		height: 30upx;
	}

	.text {
		color: #ccc;
		margin-left: 20upx;
	}
</style>
